<template>
  <div class="config_manage_container h-80%">
    <div class="config_manage_header flex justify-between ">
      <ContainerHeader :headerList="headerList" @handleCurrentChange="handleCurrentChange" />
    </div>
    <keep-alive :include="includeKeys">
      <component 
      :is="activeComponent.type" 
      :key="activeComponent.key"
      :id="activeComponent.key"     
      />
    </keep-alive>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'ConfigManage',
})
</script>
<script setup  lang="ts">
import { useI18n } from 'vue-i18n'
import apConfig from './apConfig.vue'
import cpConfig from './cpConfig.vue'
const { t } = useI18n()
const headerList = computed(()=>[
  {
    name:t('deviceManage.ap_config_label'),
    key:'ap'
  },
  {
    name:t('deviceManage.cp_config_label'),
    key:'cp'
  }
])
const components:any = [
  { type: formatComponentInstance(apConfig,'ap'), key: 'ap' },
  { type: formatComponentInstance(cpConfig,'cp'), key: 'cp'},
]
const activeComponent:any= ref(components[0])
const includeKeys = computed(()=>{
  return ['ap','cp']
})
const handleCurrentChange = (item:any) => {
  const existingComponent = components.find((i:any)=>i.key ==item.key)
  activeComponent.value = existingComponent
}
function formatComponentInstance (component: any, componentName: string) {
  return markRaw({  
    name: componentName,
    render: () => h(component)
  })
}
</script>

<style  lang="scss" scoped></style>
